<template>
  <el-dialog v-model="dialogVisible" width="85%" title="趋势表" draggable appendToBody destroyOnClose lockScroll :closeOnClickModal="false">
    <base-skeleton v-if="pageLoad.loadState === true" style="width: 100%; height: 100%; min-height: 400px; padding: 0 20px"></base-skeleton>
    <div v-else-if="pageLoad.loadState === false" class="content-wrap" style="min-height: 500px">
      <div class="table">
        <el-table max-height="50vh" border :data="amountList" showOverflowTooltip stripe style="width: 100%">
          <el-table-column fixed type="index" label="编号" sortable width="60" align="center" headerAlign="center"></el-table-column>
          <el-table-column label="时间" prop="thatdayHoursDate" width="160" sortable="custom"></el-table-column>
          <el-table-column label="账户消耗" width="120">
            <template #default="{ row }">
              <span>{{ formatNumberWithMoney(row.cost) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div>
                <span style="color: var(--el-color-primary)">
                  {{ formatNumberWithMoney(row.thatdayDividendAmount) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span style="color: var(--el-color-statistics)">
                  {{ row.cost !== 0 ? `${formatNumberWithMoney((row.thatdayDividendAmount / row.cost) * 100)}%` : '0%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+0 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 0) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatNumberWithMoney(row.dividendAmountHoursCurrent) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span style="color: var(--el-color-statistics)">
                  {{ row.cost !== 0 ? `${formatNumberWithMoney((row.dividendAmountHoursCurrent / row.cost) * 100)}%` : '0%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+1 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 1) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatNumberWithMoney(row.dividendAmountHoursOne) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span style="color: var(--el-color-statistics)">
                  {{ row.cost !== 0 ? `${formatNumberWithMoney((row.dividendAmountHoursOne / row.cost) * 100)}%` : '0%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+2 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 2) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatNumberWithMoney(row.dividendAmountHoursTwo) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span style="color: var(--el-color-statistics)">
                  {{ row.cost !== 0 ? `${formatNumberWithMoney((row.dividendAmountHoursTwo / row.cost) * 100)}%` : '0%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+3 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 3) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatNumberWithMoney(row.dividendAmountHoursThree) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span style="color: var(--el-color-statistics)">
                  {{ row.cost !== 0 ? `${formatNumberWithMoney((row.dividendAmountHoursThree / row.cost) * 100)}%` : '0%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+4 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 4) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatNumberWithMoney(row.dividendAmountHoursFour) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span style="color: var(--el-color-statistics)">
                  {{ row.cost !== 0 ? `${formatNumberWithMoney((row.dividendAmountHoursFour / row.cost) * 100)}%` : '0%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+n 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 5) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatNumberWithMoney(row.dividendAmountHoursFive) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span style="color: var(--el-color-statistics)">
                  {{ row.cost !== 0 ? `${formatNumberWithMoney((row.dividendAmountHoursFive / row.cost) * 100)}%` : '0%' }}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <base-empty
      v-else
      style="height: 100%"
      :description="pageLoad.description || ''"
      :imageSize="240"
      :loadState="pageLoad.loadState"
      :pageLoadButton="[{ text: '重新加载', callBack: getBaseDataAxios }]"
    ></base-empty>
  </el-dialog>
</template>

<script setup lang="ts">
  import { type HoursBlockPayAmount, getSpeedourTendencyAxios, getTotalSpeedourTendencyAxios } from '@/api/marketing-management';
  import { formatNumberWithMoney } from '@/utils/numb';
  const filterData = ref();
  type $RowShowData = {
    type: 'row';
    /** 推广链接id */
    referralLinkId: number;
    /** 时间戳 */
    thatdayTimestamp: number;
  };

  type $TotalShowData = {
    filterData: any;
    type: 'total';
    /** 开始日期 */
    startDate: string;
    /** 结束日期 */
    endDate: string;
  };
  type $ShowData = $RowShowData | $TotalShowData;

  const baseData = shallowReactive({
    /** 推广链接id */
    referralLinkId: -1,
    /** 开始日期 */
    startDate: '',
    /** 结束日期 */
    endDate: '',
    /** 时间戳 */
    thatdayTimestamp: -1,
  });
  const currTime = ref(Date.now());
  const pageLoad = shallowReactive<$PageLoad>({ loadState: true, description: '' });
  const dialogVisible = ref(false);
  const type = ref<'row' | 'total'>('row');
  const amountList = ref<HoursBlockPayAmount[]>([]);

  /** 请求 */
  async function getBaseDataAxios(getCensusData = true) {
    try {
      getCensusData && (pageLoad.loadState = true);
      if (type.value === 'row') {
        const res = await getSpeedourTendencyAxios({ referralLinkId: baseData.referralLinkId, thatdayTimestamp: baseData.thatdayTimestamp });
        amountList.value = res.data;
      } else {
        const res = await getTotalSpeedourTendencyAxios({ ...filterData.value, startDate: baseData.startDate, endDate: baseData.endDate, iaaFlag: 1 });
        amountList.value = res.data;
      }

      pageLoad.loadState = false;
    } catch (error) {
      pageLoad.loadState = 'err';
      pageLoad.description = String((error as Record<string, unknown>).msg || '') || '获取数据失败';
    }
  }

  /**
   * 显示
   */
  function show(data: $ShowData) {
    dialogVisible.value = true;
    type.value = data.type;

    if (data.type === 'row') {
      baseData.referralLinkId = data.referralLinkId;
      baseData.thatdayTimestamp = data.thatdayTimestamp;
    } else {
      filterData.value = data.filterData;
      console.log('======================filterData', filterData);
      baseData.startDate = data.startDate;
      baseData.endDate = data.endDate;
      baseData.referralLinkId = -1;
    }

    getBaseDataAxios();
  }

  /**
   * 隐藏
   */
  function hide() {
    dialogVisible.value = false;
  }

  defineExpose({ show, hide });
</script>
